<template>
  <div class="fs12" style="padding-bottom: 40px">
    <h5 class="fs14">审版意见：</h5>

    <div
      style="width: 100%; display: flex; margin-top: 8px"
      v-for="(item, index) in designInfo.comments"
      :key="index"
    >
      <a-descriptions
        size="small"
        style="flex: 14"
        title=""
        bordered
        :column="{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
      >
        <a-descriptions-item label="类型">
          <div>
            <div v-if="disabled">
              {{ item.innovateCommentType }}
            </div>
            <a-input
              v-else
              size="small"
              v-model:value="item.innovateCommentType"
              allow-clear
              placeholder="请输入评审类型"
            ></a-input>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="填写人">{{
          item.modifierName ? item.modifierName : item.creatorName
        }}</a-descriptions-item>
        <a-descriptions-item label="填写时间">{{
          item.gmtModified ? item.gmtModified : item.gmtCreate
        }}</a-descriptions-item>
        <a-descriptions-item label="样衣评语" :span="3">
          <div v-if="disabled">
            {{ item.content }}
          </div>
          <a-textarea
            v-else
            :max-length="1000"
            :rows="4"
            v-model:value="item.content"
          />
        </a-descriptions-item>
        <a-descriptions-item
          style="padding-bottom: 0px !important"
          label="图片"
        >
          <oss-upload
            :disabled="disabled"
            :limitNum="10"
            :size="5"
            accept=".png,.jpg,.jpeg,.gif"
            list-type="picture-card"
            v-model:files="item.ossList"
          />
        </a-descriptions-item>
      </a-descriptions>
      <div
        v-if="!disabled"
        style="
          flex: 1;
          border: 1px solid #f0f0f0;
          text-align: center;
          display: table;
          border-left: none;
          position: relative;
        "
      >
        <a-popconfirm
          title="是否确定删除该条数据？"
          ok-text="删除"
          cancel-text="取消"
          @confirm="deleteItem(item, index)"
        >
          <a
            href="javascript:;"
            style="display: table-cell; vertical-align: middle"
            >删除</a
          >
        </a-popconfirm>
      </div>
    </div>
    <div class="add" v-if="!disabled" @click="addReview">+ 添加</div>
  </div>
</template>
<script>
import { reactive, watch } from 'vue'
import { message } from 'ant-design-vue'
import { bulk_sheet_query_spl_review_template_post } from '@/server/modules/5019'
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    cp: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => []
    },
    isTemplate: {
      type: Boolean,
      default: false
    },
    supplierId: {
      type: Number,
      default: null
    },
    conclusion: {
      type: String,
      default: null
    }
  },
  setup(props, attrs) {
    const { emit } = attrs
    const designInfo = reactive({
      comments: props.data,
      conclusion: props.conclusion
    })
    const getSplReview = async () => {
      const { success, retInfo, data } =
        await bulk_sheet_query_spl_review_template_post({
          cp: props.cp,
          supplierId: props.supplierId
        })
      if (success) {
        designInfo.comments = data.comments || []
        designInfo.conclusion = data.conclusion || null
        updateData()
      } else {
        message.error(retInfo)
      }
    }
    const addReview = () => {
      designInfo.comments.push({
        commentType: null,
        content: null,
        creatorName: null,
        gmtCreate: null,
        gmtModified: null,
        modifierName: null,
        ossList: [],
        seqNo: null
      })
      updateData()
    }
    const deleteItem = (item, index) => {
      designInfo.comments.splice(index, 1)
      updateData()
    }
    const updateData = () => {
      emit('update', designInfo.comments, designInfo.conclusion)
    }
    watch(
      () => props.supplierId,
      () => {
        getSplReview()
      }
      // 删除的原因：初始化详情页面，有data，是不需要走模板的，只有切换才需要走模板
      // {
      //   immediate: true
      // }
    )
    watch(
      () => props.isTemplate,
      val => {
        val && getSplReview()
      },
      {
        immediate: true
      }
    )
    watch(
      () => props.isTemplate,
      val => {
        val && getSplReview()
      },
      {
        immediate: true
      }
    )
    watch(
      () => props.data,
      val => {
        designInfo.comments = val
      }
    )
    return {
      getSplReview,
      designInfo,
      deleteItem,
      addReview
    }
  }
}
</script>
<style lang="scss" scoped>
:deep(.ant-descriptions-item-label) {
  min-width: 65px !important;
}
:deep(.ant-descriptions-item-content) {
  min-width: 150px !important;
}
.add {
  width: 100%;
  height: 32px;
  border: 1px dashed #d9d9d9;
  text-align: center;
  line-height: 32px;
  margin-top: 8px;
  cursor: pointer;
}
</style>
